<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ZUI-静姐姐-后台通用模板1</title>
		<link rel="stylesheet" href="css/zui.css" />
		<link rel="stylesheet" href="css/public.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/zui.min.js" ></script>
		<link href="css/zui.datatable.min.css" rel="stylesheet">
		<script src="js/zui.datatable.min.js"></script>
	</head>
	<body>
		<div class="y-conRightmain scrollbar-hover">
			<ol class="breadcrumb y-borderB">
			  <li><a href="your/url/">商品</a></li>
			  <li><a href="your/url/">商品分类</a></li>
			</ol>
			
			
			<div class="y-bgfff y-padLR-20 y-padB-20 y-marR-20 card">
				<h3 class="y-borderB y-padB-10 y-marB-20 clearfix y-marT-10">
					<span style="line-height: 30px;">商品分类</span>
					<button class="btn btn-primary pull-right" type="button" onclick="categoryAddUrl()">新增分类</button>
				</h3>
				
				<style>
					
				</style>
				<!-- HTML 代码 -->
				<table class="table table-bordered">
				    <thead>
				      <tr>
				        <th class="y-smTd"></th>
				        <th>分类名称</th>
				        <th class="y-smTd">分类ID</th>
				        <th>是否推荐</th>
				        <th>是否显示</th>
				        <th>分组</th>
				        <th>排序</th>
				        <th>操作</th>
				      </tr>
				    </thead>
				    <tbody>
				    	
				    	
				      <!--一级菜单-->
				      <tr id="category1" class="y-categoryOne category1">
				      	<td class="y-smTd y-open y-open1">
				      		<div onclick="openCategory1(1,this)">
					      		<span class="y-openBtn">[+]</span>
					      		<span class="y-closeBtn y-none">[-]</span>
				      		</div>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="1"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--二级菜单-->
				      <tr id="category1-1" class="y-categoryTwo y-none y-bgMain2 category1-2">
				      	<td class="y-smTd y-open y-open2">
				      		<div onclick="openCategory2(1,1,this)">
				      			<span class="y-openBtn">[+]</span>
				      			<span class="y-closeBtn y-none">[-]</span>
				      		</div>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="2"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--三级菜单-->
				      <tr id="category1-1_1" class="y-categoryThree y-none y-bgMain3 category1_3 category1-1_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      <!--三级菜单-->
				      <tr id="category1-1_2" class="y-categoryThree y-none y-bgMain3 category1_3 category1-1_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机打印机打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--二级菜单-->
				      <tr id="category1-2" class="y-categoryTwo y-none y-bgMain2 category1-2">
				      	<td class="y-smTd y-open y-open2">
				      		<div onclick="openCategory2(1,2,this)">
				      			<span class="y-openBtn">[+]</span>
				      			<span class="y-closeBtn y-none">[-]</span>
				      		</div>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="2"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--三级菜单-->
				      <tr id="category1-2_1" class="y-categoryThree y-none y-bgMain3 category1_3 category1-2_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      <!--三级菜单-->
				      <tr id="category1-2_2" class="y-categoryThree y-none y-bgMain3 category1_3 category1-2_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机打印机打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      
				      <!--一级菜单-->
				      <tr id="category2" class="y-categoryOne category2">
				      	<td class="y-smTd y-open y-open1">
				      		<div onclick="openCategory1(2,this)">
					      		<span class="y-openBtn">[+]</span>
					      		<span class="y-closeBtn y-none">[-]</span>
				      		</div>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="1"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--二级菜单-->
				      <tr id="category2-1" class="y-categoryTwo y-none y-bgMain2 category2-2">
				      	<td class="y-smTd y-open y-open2">
				      		<div onclick="openCategory2(2,1,this)">
				      			<span class="y-openBtn">[+]</span>
				      			<span class="y-closeBtn y-none">[-]</span>
				      		</div>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="2"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--三级菜单-->
				      <tr id="category2-1_1" class="y-categoryThree y-none y-bgMain3 category2_3 category2-1_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      <!--三级菜单-->
				      <tr id="category1-1_2" class="y-categoryThree y-none y-bgMain3 category2_3 category2-1_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机打印机打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--二级菜单-->
				      <tr id="category2-2" class="y-categoryTwo y-none y-bgMain2 category2-2">
				      	<td class="y-smTd y-open y-open2">
				      		<div onclick="openCategory2(2,2,this)">
				      			<span class="y-openBtn">[+]</span>
				      			<span class="y-closeBtn y-none">[-]</span>
				      		</div>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="2"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      <!--三级菜单-->
				      <tr id="category2-2_1" class="y-categoryThree y-none y-bgMain3 category2_3 category2-2_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      <!--三级菜单-->
				      <tr id="category2-2_2" class="y-categoryThree y-none y-bgMain3  category2_3 category2-2_3">
				      	<td class="y-smTd y-open y-open3">
				      		<span class="y-openBtn">[-]</span>
				      	</td>
				      	<td><input type="text" class="form-control input-sm" value="打印机打印机打印机"></td>
				      	<td><input type="text" class="form-control input-sm" value="3"></td>
				      	<td><input type="checkbox"> 是</td>
				      	<td><input type="checkbox"> 是</td>
				      	<td>1</td>
				      	<td>100</td>
				      	<td class="text-danger"><i class="icon-edit y-fontSize-16"></i> <i class="icon-trash y-fontSize-16"></i></td>
				      </tr>
				      
				      
				      
				      
				      
				      
				    </tbody>
				 </table>
			
				<div class="clearfix">
					<button class="btn" type="button">删除</button>
					<ul class="pager pager-loose pull-right">
						<li class="previous active"><a href="#">首页</a></li>
					    <li class="previous"><a href="#">上页</a></li>
					    <li class="previous"><a href="#">1</a></li>
					    <li class="previous"><a href="#">下页</a></li>
					    <li class="previous disabled"><a href="#">尾页</a></li>
				    </ul>
				</div>
			</div>
		</div>
				
		<script type="text/javascript">
			
			function categoryAddUrl(){
				window.location.href="categoryAdd.html";
			}
			
			/*一级菜单收放*/
			function openCategory1(id,that){
				var openBtn = $(that).find(".y-openBtn");
				var closeBtn = $(that).find(".y-closeBtn");
				var two = $(".category"+id+"-2");		//二级菜单
				if(openBtn.css('display')=="none"){		//收缩
					openBtn.show();
					closeBtn.hide();
					two.find(".y-openBtn").show();
					two.find(".y-closeBtn").hide();
					two.hide();
					$(that).parents(".category"+id).removeClass("y-bgMain1");
					$(".category"+id+"_3").hide();
				}else{
					openBtn.hide();
					closeBtn.show();
					two.show();
					//$("#category"+id+"-"+id).show();
					$(that).parents(".category"+id).addClass("y-bgMain1");
				}
			}
			
			/*二级菜单收放*/
			function openCategory2(id1,id2,that){
				var openBtn = $(that).find(".y-openBtn");
				var closeBtn = $(that).find(".y-closeBtn");
				var three =$(".category"+id1+"-"+id2+"_3");		//三级菜单
				if(openBtn.css('display')=="none"){
					openBtn.show();
					closeBtn.hide();
					three.hide();
				}else{
					openBtn.hide();
					closeBtn.show();
					three.show();
				}
			}
		
		
		</script>
	</body>
</html>
